<template>
  <el-dialog :visible.sync="dialogQueryVisible" class="updateWidth">
    <!-- <div class="app-container"> -->
    <el-row :gutter="20" :style="borderStyle">
      <!--侧边部门数据-->
      <el-col :xs="9" :sm="6" :md="5" :lg="4" :xl="4" :style="borderStyle">
        <div class="head-container">
          <el-input
            v-model="deptName"
            clearable
            size="small"
            placeholder="输入部门名称搜索"
            prefix-icon="el-icon-search"
            class="filter-item"
            :style="borderStyle"
            @input="getDeptDatas"
          />
        </div>
        <el-tree
          :data="deptDatas"
          :load="getDeptDatas"
          :props="defaultProps"
          :expand-on-click-node="false"
          lazy
          :style="borderStyle"
          @node-click="handleNodeClick"
        />
      </el-col>
      <!--日程数据-->
      <el-col :xs="15" :sm="18" :md="19" :lg="20" :xl="20">
        <!--工具栏-->
        <div class="info">
          <div class="head-container" :style="borderStyle">
            <div>
              <!-- 搜索 -->
              <el-input
                v-model="query.title"
                clearable
                size="small"
                placeholder="输入日程名称搜索"
                style="width: 200px;"
                class="filter-item"
                :style="borderStyle"
                @keyup.enter.native="crud.toQuery"
              />
              <!-- <date-range-picker v-model="query.createTime" class="date-item" /> -->
              <el-date-picker
                v-model="query.datetime"
                class="date-item"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="请选择日期"
                style="width: 100%"
                :style="borderStyle"
              />
              <rrOperation />
            </div>
          </div>

          <!--表格渲染-->
          <el-table
            ref="table"
            v-loading="crud.loading"
            :data="crud.data"
            style="width: 100%;"
            height="440px"
            @selection-change="crud.selectionChangeHandler"
            @row-click="navigatorEdit"
          >
            <el-table-column
              :show-overflow-tooltip="true"
              prop="title"
              label="日程标题"
            />
            <el-table-column prop="rcjb" label="优先级">
              <template slot-scope="scope">
                <span>{{
                  scope.row.rcjb == 1
                    ? "一般"
                    : scope.row.rcjb == 2
                      ? "重要"
                      : "紧急"
                }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="发起人" />
            <el-table-column
              :show-overflow-tooltip="true"
              prop="createTime"
              width="135"
              label="创建日期"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.datetime }}</span>
              </template>
            </el-table-column>
          </el-table>
          <!--分页组件-->
          <pagination />
          <el-dialog
            :visible.sync="infoVisiable"
            :close-on-click-modal="false"
            append-to-body
          >
            <el-form ref="form" :model="form" label-width="100px" disabled>
              <el-form-item label="日程标题" prop="title">
                <el-input v-model="form.title" disabled />
              </el-form-item>
              <el-form-item label="日期">
                <el-col :span="11">
                  <el-form-item prop="kssj">
                    <el-date-picker
                      v-model="form.kssj"
                      placeholder="开始时间"
                      type="datetime"
                      style="width: 100%"
                    />
                  </el-form-item>
                </el-col>
                <el-col class="line" :span="2">-</el-col>
                <el-col :span="11">
                  <el-form-item
                    prop="jssj"
                  ><el-date-picker
                    v-model="form.jssj"
                    placeholder="结束时间"
                    type="datetime"
                    style="width: 100%"
                  /></el-form-item>
                </el-col>
              </el-form-item>
              <el-form-item label="是否公开" prop="sfgk">
                <el-switch v-model="form.sfgk" />
              </el-form-item>
              <el-form-item label="日程级别" prop="rcjb">
                <el-radio-group v-model="form.rcjb1">
                  <el-radio label="1">一般日程</el-radio>
                  <el-radio label="2">重要日程</el-radio>
                  <el-radio label="3">紧急日程</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="日程描述" prop="content">
                <el-input v-model="form.content" type="textarea" />
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <!-- <el-button type="primary" @click="addSchedule('form')">
              保存
            </el-button> -->
              <el-button @click="infoVisiable = false">
                关闭
              </el-button>
            </div>
          </el-dialog>
        </div>
      </el-col>
    </el-row>
    <!-- </div> -->
  </el-dialog>
</template>

<script>
import scheduleMessage from '@/api/schedule/schedule'

import { getDepts, getDeptSuperior } from '@/api/system/dept' // 部门
import CRUD, { presenter, header, crud } from '@crud/crud'
import rrOperation from '@crud/RR.operation' // 搜索
import pagination from '@crud/Pagination' // 分页
import { template } from '@/mixins/template'

export default {
  name: 'ScheduleQuery',
  components: {
    rrOperation,
    pagination
  },
  cruds() {
    return CRUD({
      title: '日程',
      url: 'rest/api/template/schedule/queryPager',
      crudMethod: { ...scheduleMessage }
    })
  },
  mixins: [presenter(), header(), crud(), template],
  data() {
    return {
      dialogQueryVisible: false,
      height: document.documentElement.clientHeight - 180 + 'px;',
      deptName: '',
      depts: [],
      deptDatas: [],
      level: 3,
      defaultProps: { children: 'children', label: 'name', isLeaf: 'leaf' },
      infoVisiable: false,
      form: {
        fqrname: '',
        title: '',
        kssj: '',
        jssj: '',
        sfgk: true,
        rcjb1: '',
        content: ''
      }
    }
  },
  computed: {
    themes() {
      return this.$store.getters.theme
    }
  },
  watch: {
    token(val, oldVal) {
      // 如果一开始没有，现在有了，说明刚登录，连接websocket
      if (!oldVal && val) {
        // this.initWebsocket()
      }
      // 如果原先由，现在没有了，说明退出登录，断开websocket
      if (oldVal && !val) {
        // this.closeWebsocket()
      }
    },
    themes: {
      handler(val, oldVal) {
        // this.borderStyle.borderRadius = val.bkdx;
        // this.borderStyle.border = "1px solid " + val.bkys;

        // this.borderStyle.boxShadow = "0 2px 4px rgba(0, 0, 0, .12)";

        this.borderStyle.background = val.columnGroundColor
        this.borderStyle.color = val.fontColor
        this.borderStyle = Object.assign({}, this.borderStyle)
      },
      immediate: true, // 父组件第一次传值时，执行handler，false则第一次不执行
      deep: false // formType为对象时，设置为true，此属性监听对象发生变化
    }
  },
  mounted: function() {
    const that = this
    window.onresize = function temp() {
      that.height = document.documentElement.clientHeight - 180 + 'px;'
    }
  },
  methods: {
    openQueryDialog() {
      this.dialogQueryVisible = true
    },
    // 获取左侧部门数据
    getDeptDatas(node, resolve) {
      const sort = 'id,desc'
      const params = { sort: sort }
      if (typeof node !== 'object') {
        if (node) {
          params['blurry'] = node
        }
      } else if (node.level !== 0) {
        params['pid'] = node.data.id
      }
      setTimeout(() => {
        getDepts(params).then(res => {
          if (resolve) {
            resolve(res.content)
          } else {
            this.deptDatas = res.content
          }
        })
      }, 100)
    },
    getDepts() {
      getDepts({ enabled: true }).then(res => {
        this.depts = res.content.map(function(obj) {
          if (obj.hasChildren) {
            obj.children = null
          }
          return obj
        })
      })
    },
    getSupDepts(deptId) {
      getDeptSuperior(deptId).then(res => {
        const date = res.content
        this.buildDepts(date)
        this.depts = date
      })
    },
    buildDepts(depts) {
      depts.forEach(data => {
        if (data.children) {
          this.buildDepts(data.children)
        }
        if (data.hasChildren && !data.children) {
          data.children = null
        }
      })
    },
    navigatorEdit(row) {
      this.infoVisiable = true
      this.form = row
      var type = row.rcjb
      if (type === '一般') {
        this.form.rcjb1 = '1'
      } else if (type === '重要') {
        this.form.rcjb1 = '2'
      } else {
        this.form.rcjb1 = '3'
      }
      console.log(row)
    },

    // 切换部门
    handleNodeClick(data) {
      if (data.pid === 0) {
        this.query.deptId = null
      } else {
        this.query.deptId = data.id
      }
      this.crud.toQuery()
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.updateWidth ::v-deep .el-dialog {
  width: 85%;
}
.el-form ::v-deep .el-input.is-disabled .el-input__inner {
  color: #000;
}

.el-form ::v-deep .el-textarea.is-disabled .el-textarea__inner {
  color: #000;
}
.el-form ::v-deep .el-switch .el-switch__core {
  border-color: #000;
  background-color: #000;
}
.el-form ::v-deep .el-radio__input.is-disabled.is-checked .el-radio__inner {
  background-color: #000;
  border-color: #000;
}
</style>
